<template>
  <h1>个人中心页面</h1>
  <div class="header"></div>
   <div class="box3"></div>
  <van-button type="primary">主要按钮</van-button>

  <van-config-provider :theme-vars="vars">
    <div style="border: 1px solid #000;">
        <van-button type="primary">主要按钮</van-button>
    </div>
  </van-config-provider>
</template>


<script lang="ts" setup>  
import {reactive} from 'vue'

const vars = reactive({
    buttonPrimaryBackground:'green'
})

</script>

<style lang="scss" scoped>
.box1{
  font-size: 12px;
   width: 100em;
   height: 100em;
   background-color: red;
}
.box2{
  font-size: 12px;
   width: 100rem;
   height: 100rem;
   background-color: red;
}
.box3{
  font-size: 12px;
   width: 100vw;
   height: 100vw;
   background-color: red;
}
.header{
  height: 312px;
  background-color: orange;
}
</style>